<template>
    <teleport to="body">
        <div :class="['modal', type]" v-if="show">
            <div class="inner">
                <header class="hd">
                    <h1>{{ title }}</h1>
                    <span @click="show = flase">x</span>
                </header>
                <section class="wrap">
                    <div>
                        {{ content }}
                    </div>
                </section>
            </div>
        </div>
    </teleport>
</template>

<script>
export default {
    name: 'Modal',
    data(){
        return{
            type: 'primary',
            title: 'This is Title',
            content: 'This is Content',
            show: false
        }
    },
    methods: {
        open(){
            this.show = true;
        },
        primary(opt){
            this.type = 'primary'
            this.open();
            this.getModal(opt); 
        },
        success(opt){
            this.type = 'success';
            this.open();
            this.getModal(opt); 
        },
        warn(opt){
            this.type = 'warn';
            this.open();
            this.getModal(opt); 
        },
        danger(opt){
            this.type = 'danger';
            this.open();
            this.getModal(opt);
        },
        getModal(opt){
            const { title, content} = opt;

            if(title){
                this.title = title;
            }

            if(content){   
                this.content = content;
            }

        }
    }
}
</script>

<style lang="scss">
@import '../assets/types.scss';

.modal{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba($color: #000000, $alpha: .5);

    h1{
        margin: 0;
        font-weight: normal;
    }

    &.primary{
        .hd{
            background-color: map-get($bg-colors, primary );   
            color: map-get($color, light);
        }
    }

    &.success{
        .hd{
            background-color: map-get($bg-colors, success );   
            color: map-get($color, light);
        }
    }

    &.danger{
        .hd{
            background-color: map-get($bg-colors, danger );   
            color: map-get($color, light);
        }
    }

    &.warn{
        .hd{
            background-color: map-get($bg-colors, warn );   
            color: map-get($color, light); 
        }
    }

    .inner{
        position: absolute;
        top: 50px;
        left: 50%;
        width: 500px;
        height: 300px;
        margin-left: -250px;
        border-radius: 10px;
        overflow: hidden;
        background: map-get($color, light);

        .hd{
            height: 44px;
            line-height: 44px;
            padding: 0 15px;
            box-sizing: border-box;

            h1{
                display: inline-block;
                font-size: 18px;
            }
            
            span{
                float: right;
            }

        }

        .wrap{
            padding: 50px;
            box-sizing: border-box;
        }
    }
}
</style>